import React, { FC } from 'react'
import styled from 'styled-components'
import {
	IconMoveTop,
	IconMoveUp,
	IconMoveDown,
	IconMoveBottom,
	IconMoveTopDisabled,
	IconMoveUpDisabled,
	IconMoveDownDisabled,
	IconMoveBottomDisabled,
} from './style'

export type ActionType = 'top' | 'up' | 'down' | 'bottom'

export interface ListBodyProps {
	isHideOrder?: boolean
	order?: (type: ActionType) => void
	disabled?: boolean
	disabledTop?: boolean
	disabledUp?: boolean
	disabledDown?: boolean
	disabledBottom?: boolean
	_height?: number
}

const Wrap = styled.div<{
	h: number
}>`
	height: ${(props) => {
		const _height = `${props.h}px`
		return `calc(100% - ${_height})`
	}};
	position: relative;
	.list-body__btns {
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -100px;
		li {
			width: 31px;
			height: 30px;
			padding: 10px 0;
			box-sizing: content-box;
		}
	}
`

export const ListBody: FC<ListBodyProps> = (props) => {
	const disabledTop = props.disabled || props.disabledTop
	const disabledUp = props.disabled || props.disabledUp
	const disabledDown = props.disabled || props.disabledDown
	const disabledBottom = props.disabled || props.disabledBottom
	return (
		<Wrap h={props._height || 35}>
			{props.children}
			{!props.isHideOrder && (
				<ul className="list-body__btns">
					<li onClick={() => !disabledTop && props.order?.('top')}>
						{!disabledTop ? <IconMoveTop /> : <IconMoveTopDisabled />}
					</li>
					<li onClick={() => !disabledUp && props.order?.('up')}>
						{!disabledUp ? <IconMoveUp /> : <IconMoveUpDisabled />}
					</li>
					<li onClick={() => !disabledDown && props.order?.('down')}>
						{!disabledDown ? <IconMoveDown /> : <IconMoveDownDisabled />}
					</li>
					<li onClick={() => !disabledBottom && props.order?.('bottom')}>
						{!disabledBottom ? <IconMoveBottom /> : <IconMoveBottomDisabled />}
					</li>
				</ul>
			)}
		</Wrap>
	)
}
